<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LeafletJS加载天地图 - 优吉斯(YouGIS)</title>
    <link href="../lib/leaflet/leaflet.css" rel="stylesheet" />
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/leaflet/leaflet.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      #location {
        position: fixed;
        padding: 5px;
        left: 0;
        bottom: 0;
        background-color: #fff;
        z-index: 999;
        font-size: 12px;
        font-weight: bold;
        color: blue;
        border-top-right-radius: 5px;
        /* width: 255px; */
      }

      #mapdiv {
        width: 100vw;
        height: calc(100vh - 156px);
      }

      #tkWarn {
        z-index: 999;
        position: absolute;
        color: rgb(241, 9, 191);
        font-size: medium;
        font-weight: bold;
        margin-left: 80px;
        margin-top: 20px;
      }

      #promptInfo {
        z-index: 999;
        position: absolute;
        color: red;
        font-size: large;
        font-weight: bold;
        margin-left: 80px;
        margin-top: 60px;
      }
    </style>
  </head>
  <body>
    <iframe src="../yougis.html" style="width: 100vw; height: 156px"></iframe>
    <div id="mapdiv">
        <div id="tkWarn">当前使用在线地图试用tk, 生产环境使用请自行申请, 申请地址：<a href="http://lbs.tianditu.gov.cn/" target="_blank">天地图开发者资源中心</a></div>
        <div id="promptInfo"></div>
    </div>
    <div id="location"></div>
    <script>
      var tk = "09220f6a2229f746148a0f3041dba728";
      L.tileLayer.tdt = function (option) {
        option = option || {};
        var layer;
        var subdomains = "01234567";
        switch (option.layer) {
          //单图层-矢量图
          case "vec_d":
            layer = L.tileLayer(
              "https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" + tk,
              {
                name: option.name,
                subdomains: subdomains,
              }
            );
            break;
            //单图层-矢量注记
            case "vec_z":
              layer = L.tileLayer(
              "https://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" + tk,
              {
                name: option.name,
                subdomains: subdomains,
              }
            );
            break;
            // 图层叠加-矢量图(含注记)
            case "vec":
            default:
            layer = L.layerGroup([
              L.tileLayer.tdt({
                name: "底图",
                layer: "vec_d"
              }),
              L.tileLayer.tdt({
                name: "注记",
                layer: "vec_z"
              }),
            ]);
            break;
          // 单图层-影像图
          case "img_d":
            layer = L.tileLayer(
              "https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" + tk,
              {
                name: option.name,
                subdomains: subdomains,
              }
            );
            break;
          // 单图层-影像注记
          case "img_z":
            layer = L.tileLayer(
              "https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" + tk,
              {
                name: option.name,
                subdomains: subdomains,
              }
            );
            break;
          //图层叠加-影像图(含注记)
          case "img":
            layer = L.layerGroup([
              L.tileLayer.tdt({
                name: "底图",
                layer: "img_d"
              }),
              L.tileLayer.tdt({
                name: "注记",
                layer: "img_z"
              }),
            ]);
            break;
            // 单图层-地形图
          case "ter_d":
            layer = L.tileLayer(
              "https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" + tk,
              {
                name: option.name,
                subdomains: subdomains,
              }
            );
            break;
          // 单图层-地形注记
          case "ter_z":
            layer = L.tileLayer(
              "https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" + tk,
              {
                name: option.name,
                subdomains: subdomains,
              }
            );
            break;
          //图层叠加-地形图(含注记)
          case "ter":
            layer = L.layerGroup([
              L.tileLayer.tdt({
                name: "底图",
                layer: "ter_d"
              }),
              L.tileLayer.tdt({
                name: "注记",
                layer: "ter_z"
              }),
            ]);
            break;
        }
        return layer;
      };

      let vec_d = new L.tileLayer.tdt({ layer: "vec_d", name: "矢量图" });
      let vec_z = new L.tileLayer.tdt({ layer: "vec_z", name: "矢量注记" });
      let vec = new L.tileLayer.tdt({ layer: "vec", name: "矢量图(含注记)" });
      let img_d = new L.tileLayer.tdt({ layer: "img_d", name: "影像图"  });
      let img_z = new L.tileLayer.tdt({ layer: "img_z", name: "影像注记"  });
      let img = new L.tileLayer.tdt({ layer: "img", name: "影像图(含注记)"  });
      let ter_d = new L.tileLayer.tdt({ layer: "ter_d", name: "地形图"  });
      let ter_z = new L.tileLayer.tdt({ layer: "ter_z", name: "地形注记"  });
      let ter = new L.tileLayer.tdt({ layer: "ter", name: "地形图(含注记)"  });

      $(document).ready(function () {
        var options = {
          center: [31.24, 121.50],
          zoom: 15, // initial zoom of map
          layers: [vec_d],
        };
        var map = L.map("mapdiv", options);
        L.marker([31.24, 121.50])
          .addTo(map)
          .bindTooltip("上海东方明珠")
          .openTooltip();

        const baseLayers = {
          矢量图: vec_d,
          矢量注记: vec_z,
          "矢量图(含注记)": vec,
          影像图: img_d,
          影像注记: img_z,
          "影像图(含注记)": img,
          地形图: ter_d,
          地形注记: ter_z,
          "地形图(含注记)": ter,
        };

        // 添加图层控制控件
        L.control.layers(baseLayers).addTo(map);

        // 设置初始显示内容
        let initInfo = "请通过右上角图层控制切换地图, 点击地图左下角展示坐标<br/>";
        initInfo += "当前选择地图：" + vec_d.options.name + "<br/>";
        initInfo += "服务地址：" + vec_d._url;
        document.getElementById("promptInfo").innerHTML = initInfo.replace(tk, "{tk}");
        
        // 图层切换事件, 设置显示的提示信息
        map.on('baselayerchange', function(e) {
            let info = "请通过右上角图层控制切换地图, 点击地图左下角展示坐标<br/>";
            info += "当前选择地图：" + e.name + "<br/>";
            if (e.layer._url) {
                info += "服务地址：" + e.layer._url; 
            } else if (e.layer._layers) {
                for (k in e.layer._layers) {
                    let v = e.layer._layers[k]
                    info += "服务地址" + k + "：" + v._url + "<br/>"; 
                }
            }
            document.getElementById("promptInfo").innerHTML = info.replace(tk, "{tk}");
        });

        map.on("click", (e) => {
          let lnglat = "鼠标点击位置坐标：" + e.latlng.lng + " , " + e.latlng.lat;
          $("#location")[0].innerText = lnglat;
        });
        window.map = map;
      });
    </script>
  </body>
</html>
